body {
  width: 100vw;
  height: 100vh;
  background-color: #2c3e50;
  display: grid;
  main {
    align-self: center;
    justify-self: center;
    border: solid 1px #ddd;
    width: 400px;
    height: 400px;
  }
  div {
    width: 100px;
    height: 100px;
    background-color: #f1c40f;
    animation-name: hd-move;
    animation-duration: 3s;
    animation-direction: alternate;
    animation-iteration-count: infinite;
    // animation-timing-function: cubic-bezier(0.17, 0.67, 0.84, -0.09);
    // opacity: 0;
    // animation: name duration timing-function delay iteration-count direction fill-mode;
    // animation-name: hd-opacity, hd-rotate;
    // animation-duration: 2s, 500ms;
  }
}

@keyframes hd-move {
  100% {
    transform: translateY(300px);
  }
}

@keyframes hd-opacity {
  // from {
  //   opacity: 0;
  // }

  100% {
    opacity: 1;
  }
}

@keyframes hd-rotate {
  to {
    transform: rotate(360deg);
  }
}
